<template>
  <div style="background: #fff; padding: 20px; box-sizing: border-box">
    <a-row>
      <a-col :span="24">
        <a-range-picker style="margin-right: 20px">
          <template slot="dateRender" slot-scope="current">
            <div class="ant-calendar-date" :style="getCurrentStyle(current)">{{ current.date() }}</div>
          </template>
        </a-range-picker>
        <a-button type="primary" style="background: #3C67F1;border: none;">计算</a-button>
      </a-col>
      <a-col :span="12" style="margin-top: 20px;">
        <p>
          <!--          预测时段：-->
          <!--          <span class="data">2021-5-1</span>至-->
          <!--          <span class="data">2021-5-6</span>(未来6天)-->
        </p>
      </a-col>
      <a-col :span="12" style="text-align: right;margin-top: 15px;">
        <a-button icon="export"
                  style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;margin-bottom: 10px"
                  type="primary" ghost>导出
        </a-button>
      </a-col>
      <a-col :span="24">
        <a-table :rowKey="(record,index)=>{return index}" :columns="columns" :data-source="data" :pagination="false"
                 bordered></a-table>
        <div style="text-align: right;margin-top: 15px">
          <a-pagination v-model="pageNo" :total="total" @change="onShowSizeChange" show-less-items/>
        </div>
      </a-col>
      <a-col :span="24">
        <div
          style="width: 140px;height: 50px;display: flex; margin: 20px auto;align-items: center;justify-content: space-between;font-size: 20px;font-weight: bolder;">
          <img src="../../../assets/icon/bg.png"/>变化趋势图
        </div>
      </a-col>
      <!--      <a-col :span="24" style="margin-bottom: 10px;">-->
      <!--        <a-radio-group v-model="data">-->
      <!--          <a-radio :value="1">参考腾发量</a-radio>-->
      <!--          <a-radio :value="2">作物系数KC</a-radio>-->
      <!--          <a-radio :value="3">作物需水量</a-radio>-->
      <!--        </a-radio-group>-->
      <!--      </a-col>-->
      <a-col :span="24">
        <div style="width: 100%;height: 30vh" id="analysis"></div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import {hspWeather} from '@/api/meteorological'

const columns = [
  {
    title: '预期日期',
    dataIndex: 'expectDate',
  },
  {
    title: '参考腾发量',
    dataIndex: 'evaporation',
  },
  {
    title: '作物系数KC',
    dataIndex: 'kc',
  },
  {
    title: '温度（C）',
    dataIndex: 'temperature',
  },
  {
    title: '土壤湿度（%）',
    dataIndex: 'humidity',
  },
  {
    title: '降水量（mm）',
    dataIndex: 'precipitation',
  },
  {
    title: '作物需水量（mm）',
    dataIndex: 'waterDemand',
  }
]

const data = []
export default {
  data() {
    return {
      modal2Visible: false,
      data,
      columns,
      pageNo: 1,
      pageSize: 10,
      total: 0,
    }
  },
  mounted() {
    // 折线图
    this.analysis()
    this.dataList(this.pageNo, this.pageSize)
  },
  methods: {
    // 分页
    onShowSizeChange(pageNo, pageSize) {
      this.dataList(pageNo, pageSize)
    },
    dataList(pageNo, pageSize) {
      hspWeather(pageNo, pageSize).then(res => {
        this.data = res.result.records
        this.total = res.result.total
      }).catch(err => {

      })
    },
    getCurrentStyle(current, today) {
      const style = {}
      if (current.date() === 1) {
        style.border = '1px solid #1890ff'
        style.borderRadius = '50%'
      }
      return style
    },
    // 折线图
    analysis() {
      var echarts = require('echarts')
      var roseCharts = document.getElementById('analysis') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)
      let color = ['#FFB64E']

      let xAxisData = ['1', '2', '3', '4', '5', '6', '7', '8']
      let yAxisData1 = [100, 138, 350, 173, 180, 150, 180, 230]

      const hexToRgba = (hex, opacity) => {
        let rgbaColor = ''
        let reg = /^#[\da-f]{6}$/i
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt(
            '0x' + hex.slice(5, 7)
          )},${opacity})`
        }
        return rgbaColor
      }
      myChart.setOption({
        grid: {
          left: '3%',
          bottom: '8%',
          top: '20%',
          right: '2%'
        },
        color: color,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: 'axis',
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(225,225,225,1)',
              shadowBlur: 5
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '2020-{value}',
              textStyle: {
                color: '#333'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#5391FF'
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '腾发量',
            axisLabel: {
              textStyle: {
                color: '#666'
              }
            },
            nameTextStyle: {
              color: '#666',
              fontSize: 12,
              lineHeight: 40
            },
            // 分割线
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            // name: "2018",
            name: '最高温度',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8
              }
            },
            symbol: 'circle', //数据交叉点样式
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3)
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1)
                    }
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10
              }
            },
            data: yAxisData1
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.data {
  color: #2f54eb;
  padding: 0 8px;
}
</style>